import React, { FC, useState } from "react";
import styles from "./Common.module.scss";
import { Table, Empty, Typography, Tag, Space, Button, Modal } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
const { confirm } = Modal;
const questionList = [
  {
    _id: "q1",
    title: "问卷1",
    isPublished: true,
    isStar: true,
    answerCount: 5,
    createdAt: "2023-01-01 10:00:00",
  },
  {
    _id: "q2",
    title: "问卷2",
    isPublished: false,
    isStar: false,
    answerCount: 0,
    createdAt: "2023-01-02 10:00:00",
  },
  {
    _id: "q3",
    title: "问卷3",
    isPublished: true,
    isStar: true,
    answerCount: 10,
    createdAt: "2023-01-03 10:00:00",
  },
  {
    _id: "q4",
    title: "问卷4",
    isPublished: false,
    isStar: false,
    answerCount: 0,
    createdAt: "2023-01-04 10:00:00",
  },
  {
    _id: "q5",
    title: "问卷5",
    isPublished: true,
    isStar: false,
    answerCount: 15,
    createdAt: "2023-01-05 10:00:00",
  },
  {
    _id: "q6",
    title: "问卷6",
    isPublished: false,
    isStar: true,
    answerCount: 0,
    createdAt: "2023-01-06 10:00:00",
  },
];
interface DataType {
  _id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createdAt: string;
  key: React.Key;
}
const { Title } = Typography;
const Trash: FC = function Trash() {
  const columns = [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "是否发布",
      dataIndex: "isPublished",
      key: "isPublished",
      render: (_: any, record: any) =>
        record.isPublished ? (
          <Tag color="processing">已发布</Tag>
        ) : (
          <Tag>未发布</Tag>
        ),
    },
    {
      title: "是否星标",
      dataIndex: "isStar",
      key: "isStar",
      render: (_: any, record: any) =>
        record.isStar ? (
          <Tag color="processing">已星标</Tag>
        ) : (
          <Tag>未星标</Tag>
        ),
    },
    {
      title: "回答数",
      dataIndex: "answerCount",
      key: "answerCount",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "Action",
      key: "action",
      render: (_: any, record: any) => (
        <Space size="middle">
          <Button type="link">Invite {record.name}</Button>
          <Button type="link">Delete</Button>
        </Space>
      ),
    },
  ];
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  const [dataSource, setDataSource] = useState([...questionList]);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: any) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const del = () => {
    confirm({
      title: "确认删除选中问卷吗？",
      content: "删除后将无法恢复，是否继续？",
      okText: "确认",
      cancelText: "取消",
      okType: "danger",
      icon: <ExclamationCircleOutlined />,
      onOk: () => {
        // setDataSource(dataSource.filter((item) => !selectedRowKeys.includes(item._id)));
        // setSelectedRowKeys([]);
      },
      onCancel: () => {},
    });
  };
  return (
    <div>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <input type="text" placeholder="搜索问卷" />
          {JSON.stringify(selectedRowKeys)}
        </div>
      </div>
      <div className={styles.content}>
        <div className={styles.questionCardList}>
          {(!dataSource.length && <Empty description="暂无问卷" />) || (
            <Space direction="vertical" style={{ width: "100%" }}>
              <Space>
                <Button type="primary" disabled={!selectedRowKeys.length}>
                  恢复
                </Button>
                <Button
                  danger
                  type="primary"
                  disabled={!selectedRowKeys.length}
                  onClick={del}
                >
                  删除
                </Button>
              </Space>
              <Table
                rowKey={(record: any) => record._id}
                columns={columns}
                dataSource={dataSource}
                size="small"
                pagination={{
                  current,
                  defaultPageSize: 5,
                  total: dataSource.length,
                  pageSize,
                  showSizeChanger: true,
                  showQuickJumper: true,
                  pageSizeOptions: ["5", "10", "20"],
                  className: styles.pagination,
                  onChange: (page, pageSize) => {
                    console.log(page, pageSize);
                    setCurrent(page);
                    setPageSize(pageSize);
                  },
                }}
                rowSelection={rowSelection}
              />
            </Space>
          )}
        </div>
      </div>
    </div>
  );
};

export default Trash;
